<template>
  <el-dialog
    :title="typeStatus === 'create' ? '新建' : '编辑'"
    v-model="dialogVisible"
    width="500"
  >
    <el-form
      ref="formRef"
      :model="formData"
      label-width="110px"
    >
      <!-- <el-form-item label="策略id" prop="id">
        <el-input
          maxlength="10"
          show-word-limit
          class="!w-240px"
          v-model="formData.id"
          placeholder="请输入机器人id"
          :disabled="typeStatus !== 'create'"
        />
      </el-form-item> -->
      <el-form-item label="策略类型" prop="strategyType">
        <el-input
          show-word-limit
          class="!w-240px"
          v-model="formData.strategyType"
          placeholder="请输入策略类型"
        />
      </el-form-item>
      <el-form-item label="策略名称" prop="strategyName">
        <el-input
          show-word-limit
          class="!w-240px"
          v-model="formData.strategyName"
          placeholder="请输入策略名称"
        />
      </el-form-item>
      <el-form-item label="策略触发条件" prop="strategyTriggerCondition">
        <el-input
          show-word-limit
          class="!w-240px"
          v-model="formData.strategyTriggerCondition"
          placeholder="请输入策略触发条件"
        />
      </el-form-item>
      <el-form-item label="多少次触发" prop="keywordCount">
        <el-input
          show-word-limit
          class="!w-240px"
          v-model="formData.keywordCount"
          placeholder="请输入多少次触发"
        />
      </el-form-item>
      <el-form-item label="提示词" prop="prompt">
        <el-input
          show-word-limit
          class="!w-240px"
          v-model="formData.prompt"
          placeholder="请输入提示语"
        />
      </el-form-item>
      <el-form-item label="策略版本" prop="version">
        <el-input
          show-word-limit
          class="!w-240px"
          v-model="formData.version"
          placeholder="请输入策略版本"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="flex justify-center">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { debounce } from '@/utils/debounce'
import dayjs from 'dayjs'
import * as StrategyApi from '@/api/strategy/index'
import { ElMessage, ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)
const typeStatus = ref()
const formRef = ref()

const formData = ref({
  id: '', //id
  strategyType: '', // 策略类型
  strategyName: '', // 策略名称
  strategyTriggerCondition: '', // 策略触发条件
  keyword: '', // 策略触发关键字
  keywordCount: '', // 多少次触发
  prompt: '', // 提示语
  version: '', // 版本
})

const validateId = (_, value: any, callback: any) => {
  const numberRegex = /^\d+$/
  if (!value) {
    return callback(new Error('策略id不能为空'))
  } else if (!numberRegex.test(value)) {
    return callback(new Error('请输入有效的数字'))
  } else {
    callback()
  }
}

// const formRules = reactive({
//   id: [
//     { required: true, message: '策略id不能为空', trigger: 'blur' },
//     { validator: validateId, trigger: 'blur' },
//   ],
//   strategyType: [
//     { required: true, message: '策略类型不能为空', trigger: 'blur' },
//   ],
//   strategyName: [
//     { required: true, message: '策略名称不能为空', trigger: 'blur' },
//   ],
//   strategyTriggerCondition: [
//     { required: true, message: '策略触发条件不能为空', trigger: 'blur' },
//   ],
// })

const resetForm = () => {
  formData.value = {
    id: '', //id
    strategyType: '', // 策略类型
    strategyName: '', // 策略名称
    strategyTriggerCondition: '', // 策略触发条件
    keyword: '', // 策略触发关键字
    keywordCount: '', // 多少次触发
    prompt: '', // 提示语
    version: '', // 版本
  }
  formRef.value?.resetFields()
}

const _id = ref()
const open = (type: string, row: any) => {
  if (type === 'create') {
    typeStatus.value = 'create'
    resetForm()
    dialogVisible.value = true
  } else {
    typeStatus.value = 'edit'
    formData.value = row
    _id.value = row.id
    formRef.value?.resetFields()
    dialogVisible.value = true
  }
}

defineExpose({ open })

const props = defineProps({
  getList: {
    type: Function,
    required: true,
  },
})

const emit = defineEmits(['changeData', 'handleQuery'])
const handleSubmit = debounce(async () => {
  if (!formRef.value) return
  const valid = await formRef.value.validate()
  if (!valid) return

  if (typeStatus.value === 'create') {
    // emit('changeData', {
    //   ...formData.value,
    //   createTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
    // })
    const postData = {
      ...formData.value,
      createTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
    }
    const res = await StrategyApi.strategyAdd(postData)
    if (res.flag) {
      ElMessage({ type: 'success', message: '添加成功' })
      await props.getList()
      dialogVisible.value = false
    }
  } else {
    // emit('changeData', {
    //   ...formData.value,
    //   updateTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
    // })
    const postData = {
      ...formData.value,
      updateTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
      id: _id.value,
    }
    const res = await StrategyApi.strategyEdit(postData)
    if (res.flag) {
      ElMessage({ type: 'success', message: '修改成功' })
      await props.getList()
      dialogVisible.value = false
    }
  }
}, 500)
</script>
